<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
.axis path,
.axis line {
  fill: blue;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: blue;
  stroke-width: 1.5px;
}

.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
    fill: none;
    stroke: #0a0;
    stroke-width: 1.5px;
}
</style>
<div id="plot"></div>

<script src="http://d3js.org/d3.v3.js"></script>

<script type="text/javascript">
        
    var age = 2;
    var weight = 22;
    var gender = "male";
    
    if(!age || ! weight) {
        document.getElementById('plot').innerHTML = "Missing age or weight.";
        return;
    }
    
    var margin = {top: 50, right: 20, bottom: 30, left: 50},
        width = document.getElementById('plot').clientWidth - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;
    
    var x = d3.scale.linear()
        .range([0, width]);
    
    var y = d3.scale.linear()
        .range([height, 0]);
    
    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(width/40)
        .orient("bottom");
    
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
    
    var line = d3.svg.line()
        .interpolate("basis")
        .x(function(d) { return x(d[0]); })
        .y(function(d) { return y(d[1]); });
    
    var svg = d3.select("#plot").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    // add legend   
    var legend = svg.append("g")
	  .attr("class", "legend")
	  .attr("height", 50)
	  .attr("width", 100);
    
    legend
      .append("rect")
      .attr("x", -10 )
      .attr("y", -30)
	  .attr("width", 10)
	  .attr("height", 10)
	  .style("fill", 'blue');
      
    legend
      .append("text")
	  .attr("x", 10)
      .attr("y", -20)
	  .text(gender + " median weight for age");
    
    
    x.domain([0, 20]);
    y.domain([0, 180]);
    
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .attr("dx", ".71em")
      .text("age (yrs)");
    
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("weight (lbs)");
    
    var medianWFA = [
        [2, 27],
        [10, 70],
        [15, 115],
        [20, 130]
    ];
    if (gender === "male") {
        medianWFA = [
            [2, 28],
            [10, 70],
            [15, 125],
            [20, 155]
        ];
    }
    
    svg.append("path")
      .datum(medianWFA)
      .attr("class", "line")
      .attr("d", line);
      
    svg.append("circle")
          .attr("class", "dot")
          .attr("r", 8)
          .attr("cx", function(d) { return x(age); })
          .attr("cy", function(d) { return y(weight); });
          

</script>